<template>
  <div>
    <el-input v-model.trim="ordersForm.query"
              class="input-with-select"
              placeholder="请输入内容"
              style="width: 400px;margin-bottom: 15px;">
      <el-button slot="append" icon="el-icon-search" @click="searchOrders"></el-button>
    </el-input>

    <!--    订单表格-->
    <OrdersTable></OrdersTable>

    <!--    底部分页-->
    <OrdersPagination
      :ordersForm="ordersForm"
      @searchOrders="searchOrders"
    ></OrdersPagination>

    <!--    送货时间线-->
    <OrdersSteps></OrdersSteps>

    <!--    修改配送地址-->
    <OrdersAddress></OrdersAddress>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import OrdersTable from '@/views/orders/components/OrdersTable'
import OrdersPagination from '@/views/orders/components/OrdersPagination'
import OrdersSteps from '@/views/orders/components/OrdersSteps'
import OrdersAddress from '@/views/orders/components/OrdersAddress'

const {
  mapActions
} = createNamespacedHelpers('orders')

export default {
  name: 'index',
  data () {
    return {
      ordersForm: {
        query: '',
        pagenum: 1,
        pagesize: 10,
        user_id: '',
        pay_status: '',
        is_send: '',
        order_fapiao_title: '',
        order_fapiao_company: '',
        order_fapiao_content: '',
        consignee_addr: ''
      }
    }
  },
  methods: {
    ...mapActions(['getNewOrdersList']),
    searchOrders () {
      this.getNewOrdersList(this.ordersForm)
    }
  },
  components: {
    OrdersTable,
    OrdersPagination,
    OrdersSteps,
    OrdersAddress
  },
  created () {
    this.getNewOrdersList(this.ordersForm)
  }
}
</script>

<style scoped>

</style>
